<template>
  <h1>{{ msg }}</h1>
  <span v-text="msg"></span>
  <span v-html="htmlStr"></span>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
<!--  事件冒泡 stop阻止事件冒泡-->
  <div class="card" @click="pervent">
    <button type="button" @[event].stop="add">点击我</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

//接收:props
defineProps<{ msg: number }>()
const event = 'click'
const count = ref(0)
const htmlStr:HTMLHtmlElement = '<section style="color: red">我是一段文字xxx</section>'
const pervent = () => {
  console.log('我是父级')
}
const add:Function = () => {
  console.log('点击了xxx')
}
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
